<template>
  <div>
    <Layout ref="layout" :total="total" type="2" :listQuery="listQuery" @search="getTableData">
      <template #btn>
        <el-button type="primary" round @click="$router.push('addProveTemplate')">添加证明模板</el-button>
      </template>
      <template #table="{height}">
        <SettingTable v-loading="loading" :height="height" :list="list" :tableData="tableData">
          <template #oper="{row}">
            <span class="oper" @click="oper(row,1)">预览</span>
            <span class="oper" @click="oper(row,4)">编辑</span>
            <!-- <span class="oper" @click="oper(row,2)">{{row.enable ? '禁用' : '启用'}}</span> -->
            <span class="oper" @click="oper(row,3)">删除</span>
          </template>
        </SettingTable>
      </template>
    </Layout>
    <el-dialog title="模板预览" :visible.sync="isDialog">
      <div class="editor-content" v-html="templateInfo"></div>
    </el-dialog>
  </div>
</template>

<script>
import Layout from '../layout/index.vue';
import SettingTable from '../layout/SettingTable.vue';
export default {
  name: 'moveSearch',
  components: { Layout, SettingTable },
  data() {
    return {
      tableData: [],
      list: [
        { prop: 'templateName', label: '模板名称' },
        { prop: 'createUserName', label: '创始人' },
        { prop: 'createTime', label: '创建时间', isSlot: 2 },
        { prop: 'enable', label: '模板状态', isSlot: 7 },
        { prop: '', label: '操作', minWidth: 70 },
      ],

      total: 0,
      listQuery: {
        PageSize: 50,
        PageIndex: 1
      },

      loading: false,
      templateInfo: '',
      isDialog: false

    };
  },
  methods: {
    async getTableData(e) {
      this.loading = true;
      const { TemplateName, pageIndex, pageSize } = e || {};
      const params = { Search: TemplateName || '', PageSize: pageSize || this.listQuery.PageSize, PageIndex: pageIndex || this.listQuery.PageIndex };
      const { data } = await this.$api.optionsManage.GetPageTemplate(params);
      this.tableData = data.data.data;
      this.total = data.data.total;
      this.loading = false;
    },
    async oper({ templateId, enable }, command) {
      if (command === 1) { //预览
        const { data } = await this.$api.optionsManage.GetEmployeeLeaveTemplate({ templateId });
        this.templateInfo = data.data.templateContent;
        this.isDialog = true;
      }
      // 停用启用
      // if (command === 2) {
      //   await this.$confirm(`此操作将${enable ? '禁用' : '启用'}该合同模板, 是否继续?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' });
      //   await this.$api.optionsManage.EditEnableStart({ contractTemplateId: templateId, isEnable: !enable });
      //   this.$refs.layout.onSearch();
      // }
      if (command === 3) { //删除
        await this.$confirm('此操作将永久删除该合同模板, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' });
        await this.$api.optionsManage.DeleteEmployeeLeaveTemplate({ templateId });
        this.$refs.layout.onSearch();
      }
      command === 4 && this.$router.push({ name: 'addProveTemplate', query: { templateId } }); // 编辑
    }
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
</style>
